<template>
  <div class="changePassword">
    <p class="title">修改密码</p>
    <div class="inputDiv">
      <field v-model="oldPassword" type="password" label="原密码" />
      <field v-model="newPassword1" type="password" label="新密码" />
      <field v-model="newPassword2" type="password" label="确认新密码" />
    </div>
    <div class="submitBtn" @click="submit()">提交</div>
  </div>
</template>

<script>
import { Field, Toast } from "vant";
import { changeUserPwd } from "@/api/user";
import md5 from "md5";

export default {
  name: "ChangePassword",
  components: {
    Field
  },
  data() {
    return {
      accountName: "",
      oldPassword: "",
      newPassword1: "",
      newPassword2: ""
    };
  },
  mounted() {
    this.accountName = sessionStorage.getItem("account");
  },
  methods: {
    async submit() {
      if (!this.newPassword2 || !this.newPassword1) {
        Toast.fail("请输入新密码");
        return;
      }
      if (this.newPassword2.length < 8 || this.newPassword1.length < 8) {
        Toast.fail("请输入至少8位的密码");
        return;
      }
      if (this.newPassword1 !== this.newPassword2 || !this.newPassword2) {
        Toast.fail("两次新密码输入不一致");
        return;
      }
      let userNo = JSON.parse(sessionStorage.getItem("pcUserInfo")).userNo;
      let res = await changeUserPwd({
        userNo,
        // account: this.accountName,
        newPassword:
          this.$base.randomString(3) +
          md5(this.newPassword1) +
          this.$base.randomString(3),
        oldPassword:
          this.$base.randomString(3) +
          md5(this.oldPassword) +
          this.$base.randomString(3)
      });
      if (res.code === 0) {
        Toast.success("修改密码成功");
        sessionStorage.clear();
        this.$router.push("/");
      } else {
        Toast.fail(res.msg);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.changePassword {
  .title {
    font-size: 18px;
    font-weight: 500;
    text-align: left;
    color: #ffffff;
    line-height: 36px;
    letter-spacing: 2px;
    margin-left: 20px;
    margin-top: 25px;
  }
  .inputDiv {
    margin-left: 8%;
    margin-top: 10%;
  }
  .submitBtn {
    width: 220px;
    height: 35px;
    font-size: 16px;
    line-height: 30px;
    letter-spacing: 7px;
    color: #ffffff;
    border-radius: 15px;
    text-align: center;
    background: linear-gradient(#ff89a5 0%, #fc5a69 100%);
    margin: 25% auto;
  }
}
/deep/ .van-cell {
  width: 90%;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 1px 2px #ccc;
  margin-top: 15px;
}
/deep/ .van-field__label {
  margin-right: 5px;
  width: 50px;
}
</style>
